<template>
  <div class="page-main">
    <div class="page-con">
      <query-page
        title="单一控制来源明细查询"
        :form-component-config="formComponentConfig"
        :form-render-config="formRenderConfig"
        :form-render-keys="formRenderKeys"
        :table-component-config="tableComponentConfig"
        :table-render-config="tableRenderConfig"
        :table-render-keys="tableRenderKeys"
        :loading="isLoading"
        :data="renderData"
        :total="total"
        @query-data="getData"
      >
        <template #unSecretLevel="{ record }">
          <secretLevelInfo
            :record="{
              secretLevel: record.unSecretLevel,
              secretLevelName: record.unSecretLevelName,
            }"
          />
        </template>
      </query-page>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import queryPage from '@/common/components/query-page/index.vue';
  import secretLevelInfo from '@/common/components/secret-level-info/index.vue';
  import {
    formComponentConfig,
    formRenderConfig,
    formRenderKeys,
  } from '@/views/basic-configuration/single-list-query/Singlelistqueryform';

  import {
    tableRenderConfig,
    tableComponentConfig,
    tableRenderKeys,
  } from '@/views/basic-configuration/single-list-query/SinglelistqueryTab';
  import { getListData } from '@/api/Basimanagementapi/Basicdatacontent';

  const isLoading = ref(true);
  const renderData = ref<any[]>([]);

  const total = ref();
  const getData = async (queryInfo: object) => {
    if (queryInfo?.unCreateTime?.length > 1) {
      queryInfo.unCreateTime[0] += ' 00:00:00';
      queryInfo.unCreateTime[1] += ' 23:59:59';
      queryInfo.unCreateTime = queryInfo.unCreateTime.join();
    }
    renderData.value = [];
    isLoading.value = true;
    console.log('queryInfo', queryInfo);
    const { data } = await getListData(queryInfo);
    // const data = reactive();
    renderData.value = data.list;
    total.value = data.total;
    isLoading.value = false;
  };
</script>

<style lang="less" scoped>
  .page-con {
    height: 100%;
    background-color: #fff;
  }

  .table-header {
    height: 40px;
    line-height: 40px;
  }

  .table-side {
    width: 200px;
    height: 100%;
    margin-right: 20px;
    background-color: #00fff0;
  }
</style>
